<!--
 * @Description: 定制窗帘
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-07-17 20:29:21
 * @FilePath: /yuxiuproweb/src/views/mes/pro/fabric/index.vue
-->
<template>
    <div class="app-container">
        <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="日期：" prop="type">
        <el-radio-group v-model="queryParams.type">
          <el-radio label="1">按月</el-radio>
          <el-radio label="2">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="" prop="yearMonth" v-show="queryParams.type === '1'">
        <el-date-picker
          clearable
          v-model="queryParams.yearMonth"
          type="month"
          value-format="yyyy-MM"
          placeholder="请选择月"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label=""
        prop="startAndEnd"
        v-show="queryParams.type === '2'"
      >
        <el-date-picker
          clearable
          v-model="queryParams.startAndEnd"
          type="daterange"
          style="width: 300px"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['md:order:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        @submit.native.prevent
      >
        <el-form-item label="材料名称" prop="fabricName">
          <el-input
            v-model="queryParams.fabricName"
            filterable
            placeholder="请输入编码"
            @keyup.enter.native="getList"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getList"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <!-- <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-printer"
            size="mini"
            @click="handlePrint"
            >打印</el-button
          >
        </el-col>
      </el-row> -->
      <el-table :data="list" :max-height="maxHeight" v-loading="loading">
        <el-table-column type="index" width="55" align="center" />
        <el-table-column label="材料名称" align="center" prop="name">
        </el-table-column>
        <el-table-column label="数量" align="center" prop="number" />
        <!-- <el-table-column label="总计" align="center" prop="sum" /> -->
        <!-- <el-table-column
          label="可用数量"
          align="center"
          prop="inventoryQuantity"
        />
        <el-table-column label="数量明细" align="center" prop="number_list" />
        <el-table-column
          label="可用数量明细"
          align="center"
          prop="inventory_quantity_list"
        /> -->
      </el-table>
      <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
      <!-- 打印 -->
      <!-- <print-view
        v-if="print.show"
        :show.sync="print.show"
        v-bind="print"
      ></print-view> -->
    </div>
  </template>
  
  <script>
  import { fabricList } from "@/api/asc/fabric";
//   import { wageStatistics } from "@/api/money/catWage";
  import commonMix from "@/utils/mixins/common";
  
  export default {
    mixins: [commonMix],
    // components: {
    //   PrintView,
    // },
    data() {
      return {
        total: 0,
        queryParams: {
          fabricName: "",
          pageNum: 1,
          pageSize: 100,
          type: "1",
          yearMonth: null,
          startDate: null,
          endDate: null,
        },
        loading: false,
        list: [],
        print: {
          show: false,
          type: "0",
          data: null,
        },
          // 显示搜索条件
        showSearch: true,
       
      };
    },
    created() {
      this.queryParams.yearMonth = this.parseTime(new Date(), "{y}-{m}");
      this.getList();
    },
    methods: {
      getList() {
        this.loading = true;
        fabricList(this.queryParams).then((res) => {
          this.list = res.rows || [];
          this.loading = false;
          this.total = res.total;
        });
      },
      resetQuery() {
        this.queryParams.fabricName = "";
        this.getList();
      },
      // 打印
      handlePrint() {
        this.print = {
          show: true,
          type: "0",
          data: this.list,
        };
      },
        /** 搜索按钮操作 */
        handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
        },
         /** 导出按钮操作 */
    handleExport() {
      const params = {
        ...this.queryParams,
        type: undefined,
        yearMonth:
          this.queryParams.type === "1"
            ? this.queryParams.yearMonth
            : undefined,
        startDate:
          this.queryParams.type === "2"
            ? this.queryParams.startAndEnd?.[0]
            : undefined,
        endDate:
          this.queryParams.type === "2"
            ? this.queryParams.startAndEnd?.[1]
            : undefined,
        startAndEnd: undefined,
      };
      this.download(
        "pro/record/exportWorkerWageStatistic",
        {
          ...params,
        },
        `wage_${new Date().getTime()}.xlsx`
      );
    },
    },
  };
  </script>
  